---
description: Компонент закрепляет переданный контент сверху или снизу области видимости.
---

<Overview group="layout">

# FixedLayout [tag:component]

Компонент закрепляет переданный контент сверху или снизу области видимости.
Учитывает высоту шапки и прочие системные отступы.

</Overview>

> Компонент использует `position: fixed` вместо `position: sticky` (ограничение минимально поддерживаемых версий браузеров).
> По этой причине `FixedLayout` находится вне основного потока. Учитывайте это при разработке интерфейсов.

import { FixedLayoutWrapper } from '@/components/wrappers';

<Playground Wrapper={FixedLayoutWrapper}>
  ```jsx
  <FixedLayout vertical="top">
    <Search />
    <Separator />
  </FixedLayout>
  <Group mode="plain">
    {/** Компенсируем место, занятое поиском **/}
    <Spacing size={40} />
    <Div style={{ maxHeight: 170, overflow: 'auto' }} tabIndex={0}>
      <Paragraph>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sollicitudin lectus, a
        commodo sapien. Vivamus a urna leo. Integer iaculis dignissim urna, sit amet vestibulum diam
        bibendum a. Donec eu arcu ut augue porttitor faucibus. Vestibulum nec pretium tortor, sit
        amet congue nunc. Aenean ullamcorper ex sem, sed interdum quam consequat et. Vestibulum a ex
        non diam fringilla feugiat. Nunc eu tellus sed leo elementum cursus. Mauris blandit porta
        egestas. Curabitur eget justo elementum, malesuada lacus ut, congue mauris. Integer orci
        nisi, convallis vitae dapibus sit amet, molestie a risus. Aenean ultricies lacus eros, sit
        amet condimentum urna malesuada et. Sed quis dolor tempus orci fringilla volutpat in sed
        velit. Aenean aliquet bibendum pretium. Cras pulvinar lobortis purus. Donec placerat
        suscipit leo vitae sodales. Phasellus convallis lorem vitae arcu finibus pellentesque. In
        imperdiet vel leo a euismod. Nam sed odio a neque venenatis suscipit a placerat magna.
        Mauris magna nisl, consequat nec augue vitae, ultricies scelerisque ante. Phasellus pharetra
        risus eget imperdiet sodales. Integer dignissim auctor semper. Nulla odio odio, euismod ut
        interdum in, bibendum sed massa. Proin rutrum molestie massa in ultrices. Donec eu euismod
        turpis, eget lobortis lorem. Nulla facilisi. Nam lacinia posuere turpis, sed laoreet turpis
        auctor nec. Curabitur eu fermentum mauris. Phasellus malesuada consectetur mollis.
        Pellentesque pulvinar mauris turpis. Integer neque dolor, semper quis neque et, gravida
        commodo eros. Duis efficitur ex a turpis blandit tincidunt. Mauris sem mi, imperdiet quis
        ligula sit amet, fermentum vulputate felis. Phasellus eu ullamcorper dolor, porttitor
        pulvinar diam. Aliquam euismod, mauris nec varius lacinia, ligula libero vulputate leo, ut
        tristique massa nisi vitae tortor. Phasellus purus elit, gravida sit amet neque id, aliquam
        rutrum dui. Maecenas luctus sem vitae molestie porttitor. Cras viverra mauris risus, at
        sollicitudin ipsum interdum eu. Sed sit amet tempor enim.
      </Paragraph>
    </Div>
  </Group>
  ```
</Playground>

## Свойства и методы [#api]

<PropsTable name="FixedLayout" />
